<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta title="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>聊天记录</title>
    <!-- layui.css -->
    <link th:href="@{/plugin/layui/css/layui.css}" rel="stylesheet"/>
    <script th:src="@{/js/jquery-2.2.4.min.js}"></script>
    <script th:src="@{/js/workutil.js}"></script>
    <script th:src="@{/plugin/layui/layui.js}"></script>
    <style>
        body .layim-chat-main {
            height: auto;
        }
    </style>
</head>
<body>
<div class="layim-chat-main">
    <ul id="LAY_view"></ul>
</div>
<div id="LAY_page" style="margin: 0 10px;"></div>
<script>
    layui.use(['layer', 'layim'], function () {
        loadMoreData(1);
    });
    function buildData(data) {
        console.log(data)
        var count = data.page * data.limit;
        for (var i in data.data) {
            var html = '';
            var item = data.data[i];
            if (item.id == parent.layui.layim.cache().mine.id) {
                html += '<li class="layim-chat-mine"><div class="layim-chat-user"><img src="' + item.avatar + '"><cite><i>' + layui.data.date(item.timestamp) + '</i>' + item.username + '</cite></div><div class="layim-chat-text">' + layui.layim.content(item.content) + '</div></li>';
            } else {
                html += '<li><div class="layim-chat-user"><img src="' + item.avatar + '"><cite>' + item.username + '<i>' + layui.data.date(item.timestamp) + '</i></cite></div><div class="layim-chat-text">' + layui.layim.content(item.content) + '</div></li>';
            }
            $('#LAY_view').append(html);
        }
        if (data.count > count) {
            $('#LAY_view').append('<li style="text-align: center;font-size: 22px;cursor: pointer;min-height: 10px;" onclick="loadMoreData(' + (data.page + 1) + ',this)">加载更多</li>');
        }
    }

    function loadMoreData(page, c) {
        var param = workUtils.parseParams();
        if (c != undefined) {
            $(c).remove();
        }
        workUtils.ajaxGet("../chat/listchat", {
            id: param.id,
            page: page,
            limit: 10
        }, function (data) {
            buildData(data);
        });
    }
</script>
</body>
</html>
